<template>
  <button :="fv.rootProps" hover-class="none" @click="emits('click', $event)">
    <view :class="[ns.e('background')]"></view>
    <view :class="[ns.e('border')]"></view>
    <view :class="[ns.e('shadow')]"></view>
    <view :class="[ns.e('loading')]" v-if="fv.rootProps.loading">
      <slot name="loading">
        <Font icon="icon-loading"/>
      </slot>
    </view>
    <Font v-if="icon" :icon="icon" :class="[ns.e('content')]"/>
    <view v-else :class="[ns.e('content')]">
      <slot></slot>
    </view>
  </button>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import Button from '.'
import { useNamespace } from '@/utils'
import Font from '@/components/font/index.vue'

defineOptions({
  name: Button.name
})
const props = defineProps(Button.props)
const emits = defineEmits(Button.emits)
const ns = useNamespace(Button.name)
const fv = computed(() => {
  const disabled = props.disabled || props.loading
  const rootProps = {
    loading: props.loading,
    disabled,
    class: [
      ns.b,
      disabled && 'is-disabled',
      props.loading && 'is-loading',
      props.icon && 'is-icon',
      ns.b + '--' + props.type,
    ],
  }
  return {
    rootProps
  }
})
</script>